<template>
	<iframe @event1="event1" @event2="event2" :onload="onloadCode" src="about:blank"
		style="border:1px solid;height: 300px;width: 100%"></iframe>
</template>

<script>
	export default {
		name: 'videoIframe',
		props: ['videoUrl'],
		data() {
			return {
				onloadCode: ``
			}
		},
		created() {
			this.onloadCode = `
					this.contentWindow.document.body.innerHTML =
						'<video style="width: 100%;height: 100%" controls="controls" src="${this.videoUrl}"></video>';
					const iframe = top.document.getElementsByTagName('iframe')[0]
					var evObj = document.createEvent('MouseEvents');
					evObj.initEvent('event1', true, false);
					iframe.dispatchEvent(evObj)`
		},

		methods: {
			event1(a) {
				console.log(a)
			},
			event2(a) {
				console.log(a)
			}
		}
	}
</script>

<style>
</style>